<template>
  <view>
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>

    <view class="u-padding-20">
      <view class="mingpian u-m-b-30">
		<view class="lefttips">会员卡</view>
        <!--<view class="htitle u-m-t-50 u-m-b-2">
           <i><u-icon name="bankcard" custom-prefix="customicon" size="30"></u-icon></i> 

        </view>-->
		<view class="u-m-t-50 u-p-t-40 u-p-b-30" style="color: #909399;">
			
		<u-radio-group v-model="type_id" placement="column">
					<u-radio
						:customStyle="{marginBottom: '15px'}"
						@change="levle_change" v-for="(item, index) in leveltypelist"
						:label="item.type_name +' '+ item.price+'元'"
						:key="index"
						:name="item.type_id"
						:disabled="!item.status">
					</u-radio>
        </u-radio-group>
		</view>
		
      </view>
	  

      
    </view>
	  <view class="flexbottom">
		<view class="u-padding-20">
			  <u-button type="success" @click="confirm()" :hairline="false" class="custom-style" :customStyle="submitStyle">购买</u-button>
		</view>
	  </view>
	
  </view>
</template>


<script>
import { mapState, mapMutations } from "vuex";
import { api_leveltypemanage,api_levelupgradepay } from '@/config/api.js';
// #ifdef MP-WEIXIN
import { setPay } from "@/config/pay";
// #endif
export default {
  data() {
    return {
      flow_list: [],
      hasLogin: false,
      loadStatus: "loadmore",
      loadstatus: false,
      loadstxt: "loading...",
      leveltypelist: [],
      type_id: "",
      coin_list: [],
      price: 0, //等级1价
      platform: "",
	  content:"",
	  submitStyle:{
		background: '#4B536A',
		color: '#FFFFFF',
		borderRadius: '50rpx',
		border: 'none'
	  }
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  onLoad() {
    //    this.hasLogin = this.$store.getters.loginFlag;
	// if (this.hasLogin){
	// 	this.select_coininfo = this.user.userInfo.coinlist[0];
	// 	this.pay_coininfo_id = this.select_coininfo.id;
	// }else{
	// 	return;
	// }
    this.get_level_type();

  },

  methods: {
    levle_change(e) {
      this.type_id = e;
      for (let i = 0; i < this.leveltypelist.length; i++) {
        if (this.leveltypelist[i].type_id == this.type_id) {
          this.price = this.leveltypelist[i].price;
          break;
        }
      }
      console.log(this.price);
    },

    get_level_type() {
        api_leveltypemanage({}).then((res) => {
            this.leveltypelist = res.type_manage;
          }).catch((e) => {});
    },

    confirm() {
      if (this.type_id == "") {
        this.$tools.msg("请选择购买类型");return;
      }
        api_levelupgradepay({
			type_id:this.type_id
		}).then((res) => {
            this.$tools.goJump('/pagesPackageA/order/pay',{order_code:res.order_code},'','launch')
        }).catch((e) => {});
	  

    },

	
	
  },
};
</script>
<style lang="scss" scoped>
.ssradio {
  border: solid 0px #2b85e4;
  padding: 10rpx 20rpx 10rpx 0rpx;
  margin: 10rpx 0rpx;
  border-radius: 20rpx;
  color: #FFFFFF;
}
.ppradio {
  padding: 5rpx 20rpx;
}
.content{
	color: #999999;
	line-height: 180%;
}

.mingpian{
	background: #F1F2F7;
	color: #4B536A;
	border-radius: 18rpx;
	padding: 20rpx;
	position: relative;
	.lefttips{
		background: #4B536A;
		height: 60rpx;
		line-height: 50rpx;
		border-radius: 18rpx 0rpx 50rpx 0rpx;
		position: absolute;
		left:0rpx;top:0rpx;
		width: 280rpx;
		padding: 6rpx 5rpx 4rpx 5rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 28rpx;
		
	}
}

	.custom-style {
		background: #4B536A;
		color: #FFFFFF;
		border-radius: 50rpx;
		border: none;
	}
</style>
